<template>
  <template v-for="item in items" :key="item.id">
    <ElSubMenu v-if="item.subMenu" :index="item.id">
      <template #title>
        <ElIcon>
          <component :is="item.icon" />
        </ElIcon>
        <span>{{ item.title }}</span>
      </template>
      <NavigationMenuItem v-if="item.subMenu" :items="item.subMenu" />
    </ElSubMenu>
    <ElMenuItem v-else :index="item.id">
      <ElIcon>
        <component :is="item.icon" />
      </ElIcon>
      <span>{{ item.title }}</span>
    </ElMenuItem>
  </template>
</template>

<script lang="ts" setup>
import { type MenuItem } from "./types";
import { ElMenuItem, ElSubMenu, ElIcon } from "element-plus";
defineProps<{ items: MenuItem[] }>();
</script>
